<template>
	<view>
		<u-index-list :index-list="indexList">
			<template>
				<u-index-item>
					<view class="list-cell" v-for="item in commonly" @click="selectBank(item.name)">
						<view class="list-img">
							<!-- <u--image :showLoading="true" :src="item.img" width="50rpx" height="50rpx"></u--image> -->
							<image :src="$store.state.user.baseURL + item.img" style="height: 50rpx;width: 50rpx;"></image>
						</view>
						<view class="list-title">
							{{item.name}}
						</view>
					</view>
				</u-index-item>
			</template>
			<!-- <template v-for="(item, index) in list">
				<u-index-item>
					<u-index-anchor :text="item.letter"></u-index-anchor>
					<view class="list-cell" v-for="(cell, index) in item.data" @click="selectBank(cell)">
						<view class="list-img">
							<u--image :showLoading="true" src="/static/img/bankCard.png" width="50rpx" height="50rpx"></u--image>
						</view>
						<view class="list-title">
							{{cell}}
						</view>
					</view>
				</u-index-item>
			</template> -->
		</u-index-list>
	</view>
</template>

<script>
	let timer = null;
import line from '../../../uni_modules/uview-ui/libs/config/props/line';
	import {
		letters,
		bankList
	} from '@/utils/banks'
	export default {
		data() {
			return {
				keyword: '',
				list: [],
				indexList: letters,
				count: 1,
				commonly: [
					// {
					// 	name: '中国银行',
					// 	img: '/static/img/bank1.png'
					// },
					// {
					// 	name: '中国建设银行',
					// 	img: '/static/img/bank2.png'
					// },
					// {
					// 	name: '中国光大银行',
					// 	img: '/static/img/bank3.png'
					// },
					// {
					// 	name: '中国邮政储蓄银行',
					// 	img: '/static/img/bank4.png'
					// },
					// {
					// 	name: '中国农业银行',
					// 	img: '/static/img/bank5.png'
					// },
					// {
					// 	name: '交通银行',
					// 	img: '/static/img/bank6.png'
					// },
					// {
					// 	name: '兴业银行',
					// 	img: '/static/img/bank7.png'
					// },
					// {
					// 	name: '工商银行',
					// 	img: '/static/img/bank8.png'
					// },
					// {
					// 	name: '民生银行',
					// 	img: '/static/img/bank9.png'
					// },
					// {
					// 	name: '中信银行',
					// 	img: '/static/img/bank10.png'
					// },
					// {
					// 	name: '浦发银行',
					// 	img: '/static/img/bank11.png'
					// },
					// {
					// 	name: '招商银行',
					// 	img: '/static/img/bank12.png'
					// },
					// {
					// 	name: '广发银行',
					// 	img: '/static/img/bank13.png'
					// },
					// {
					// 	name: '平安银行',
					// 	img: '/static/img/bank14.png'
					// },
				]
			}
		},
		onLoad() {
			// this.list.push(bankList[0])
			// this.onSetInterval()
			this.getBankList()
		},
		methods: {
			getBankList(){
				this.$api.getBank().then(res => {
					this.commonly = res.data;
				})
			},	
			selectBank(name) {
				let pages = getCurrentPages()
				let prevPage = pages[pages.length - 2]
				prevPage.$vm.bankValue(name)
				uni.navigateBack({ delta: 1 })
			},
			// 设置计时器
			onSetInterval() {
				timer = setInterval(() => {
					if(this.count == bankList.length){
						this.clearInterval()
						return
					}
					this.list.push(bankList[this.count])
					this.count++
				}, 500);
			},
			// 清除计时器
			clearInterval() {
				if (timer) {
					clearInterval(timer);
					timer = null;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 16px;
		line-height: 24px;
		background-color: #fff;
		border-bottom: 1rpx solid #d9d9d997;
	}

	.list-img {
		width: 50rpx;
		height: 50rpx;
	}

	.list-title {
		padding-left: 20rpx;
	}
</style>